Equal Height Colums & IE9

alvin · January 29, 2011

Привет, тестировал тут некоторые оптимизации разных методов вёрстки колонок одинаковой высоты, и наткнулся на одну странную особенность IE 9 в случае использования одного старого метода, который так и называется Equal Height Colums. Суть этой странности продемонстрирована на скринах ниже:

рис 1. - рендер браузеров с правильным отображением (куда входит ie6-ie8, Opera > 9.2x, Safari > 3.x, FF > 3.6x и т.д)

рис 2. - отображение в IE9, на рисунке видно, что border-bottom элемента blockquote на один пиксель выше, чем во всех остальных

Рис. 1

Рис. 2

Собственно, подскажите пожалуйста из-за чего это происходит, и как это фиксить относительно без хаков и условных комментариев.

Сам код разметки (копипаст-реди ):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
* {border: none; padding: 0; margin: 0; outline: none;}
body {font: 62.5% Verdana;}
p {font-size: 1em;}

.block-wrapper {
	padding-bottom: 1em;
	border: .1em solid #333;
	background: #dfdfdf;
	width: 92em;
	margin: 2em auto;

}

.row-wrapper {
	margin: 2em auto;
	overflow: hidden;
	width: 92em;
	position: relative;
	margin: 2em auto;
}

.col {
	float: left;
	margin: 1em 0em -50em 1.7em;
	padding: 1em 1em 50em 1em;
	width: 26.2em;
	background: #fdfdfd;
	border: 0.1em solid #999;
	display: inline;
}

.col p {margin-bottom: 4em;}

.col blockquote {
	position: absolute;
	bottom: 0;
	width: 27.2em;
	height: 2em;
	margin: 0 0 0 -1em;
	text-align: right;
	padding: 0 .5em;
	border-bottom: 0.1em solid #999;
}
</style>
</head>

<body>
<div class="block-wrapper">
<div class="row-wrapper">
	<div class="col">
		<h3>Lorem ipsum dolor #1</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<blockquote>Lorem ipsum dolor #1 <a href="#">add info …</a></blockquote></p>
	</div>
	<div class="col">
		<h3>Lorem ipsum dolor #2</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><blockquote>Lorem ipsum dolor #1 <a href="#">add info …</a></blockquote>
	</div>
	<div class="col col-three">
		<h3>Lorem ipsum dolor #3</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><blockquote>Lorem ipsum dolor #1 <a href="#">add info …</a></blockquote>
	</div>
</div>
</div>
<h2>Some other header</h2>
</body>
</html>

Vlad · January 29, 2011

Вы забыли, что IE9 еще официально не вышел и носит гордую приставку Бета. В финальной версии этот баг вполне возможно пофиксят, особенно если вы сообщите кому надо о нем.

Страница для репортов

http://connect.microsoft.com/ie

alvin · January 29, 2011

В общем, написал репорт и так же закроспостил сюда http://www.gotdotnet.ru/forums/2/135148/ , там в основном маркетологи и прочие микрософтовские "агенты" обитают, думаю, что если это действительно баг (ну а что это ещё если не он? ), то шансов, что на него обратят внимание будет больше.

А вообще, природа этого бага кажется как-то связана с масштабированием шрифтов в случае отрицательных margin, но я не проводил много тестов, так же, если увеличивать/уменьшать масштаб средствами самого браузера (Ctrl+колесо мыши вверх/вниз) то когда мы увеличиваем масштаб и текст становится дефолтовой метрики (16px) этот однопиксельный баг исчезает, однако, даже если не переопределять фонт (body {font: 62.5% Verdana;}), и использовать дефолтовый (16px) баг всё-равно присутствует... то есть он исчезает когда ИЕ9 начинает пересчитывать масштаб... даже чем-то peek-a-boo напомнило, но здесь вместо рефреша уже зум )

Так же, мой имхо такое, что если его природа завязана на отрицательных маргинах и МС не уберёт это до релиза, нас ждёт очередное IE-веселье с канфети и хлопушками в виде условных комментариев, так как много всего эта особенность может затрагивать.

В общем, как-то так... если кому интересно - отпишусь, как только появится какая-то конкретная инфа из официальных источников )

Vlad · January 30, 2011

Отпишитесь обязательно.

Sign In

Equal Height Colums & IE9

Question

alvin

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

alvin

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information